import { useState } from 'react'
import './style/index.scss'
import InputBox from './component/InputBox'

function Login() {
  const [loginFormData, setLoginFormData] = useState({
    username: '',
    password: '',
  })
  const onLogin = () => {
    if (!loginFormData.username || !loginFormData.password) {
      alert('账号和密码请填写完整')
    } else {
      alert('登录成功')
    }
  }
  return (
    <>
      <div className="login-box">
        <div className="login-head">Login To Talking Hub</div>
        <form action="#" className='input-group'>
          <InputBox
            value={loginFormData.username}
            type="text"
            showIcon={false}
            onInput={(e: string) => {
              loginFormData.username = e
              console.log(loginFormData.username)
              setLoginFormData({ ...loginFormData })
            }}
          />
          <InputBox
            value={loginFormData.password}
            type="password"
            showIcon={true}
            onInput={(e: string) => {
              loginFormData.password = e
              console.log(loginFormData.password)
              setLoginFormData({ ...loginFormData })
            }}
          />
        </form>
        <div className="login-button">
          <a>Forget Your Password?</a>
          <button onClick={onLogin}>Login</button>
        </div>
      </div>
    </>
  )
}

export default Login
